<template>
	<view class="leave_box">
    <navTitle :title="'個人資料證件'"></navTitle>
    <view class="cer-title" v-if="false">
      <view class="c-t-l">證件到期通知</view>
      <view class="c-t-r">
        <!-- checkboxGroupChange -->
        <view class="collect-list u-flex" v-for="f in wayList" :key="f.id">
          <checkbox :name="f.id" activeColor="#1D7BF7" shape="circle" style="transform:scale(0.7);border-radius: 50%;" v-model="f.checked"></checkbox>{{ f.name }}
        </view>
      </view>
    </view>
    <!-- 身份證 -->
    <view class="card-box" style="margin-top: 10px;">
      <view class="card-title">
        <view class="card-t-l">身份證</view>
        <view>
          <view v-if="has_card_expiration_date==1">{{card_expiration_date|filterCardExpirationDate}}</view>
          <!-- <img class="down" src="/static/images/boss/icon_b_arrow_down.png" mode="scaleToFill" alt=""> -->
          <!-- <img class="add" src="/static/images/user/icon_u_card_add.png" mode="scaleToFill" alt=""> -->
        </view>
      </view>
      <view class="card-list">
        <view class="card-li">
          <block v-if="id_image_front">
            <img :src="id_image_front" mode="scaleToFill" alt="">
          </block>
          <block v-else>
            <img @tap="uploadImg('id_image_front')" class="img-photo" src="/static/images/user/icon_u_photo.png" mode="scaleToFill" alt="">
            <view @tap="uploadImg('id_image_front')" class="img-txt">上傳人像面</view>
            <img @tap="uploadImg('id_image_front')" src="/static/images/user/icon_u_card_1.png" mode="scaleToFill" alt="">
          </block>
        </view>
        <view class="card-li">
          <block v-if="id_image_backend">
            <img :src="id_image_backend" mode="scaleToFill" alt="">
          </block>
          <block v-else>
            <img @tap="uploadImg('id_image_backend')" class="img-photo" src="/static/images/user/icon_u_photo.png" mode="scaleToFill" alt="">
            <view @tap="uploadImg('id_image_backend')" class="img-txt">上傳國徽面</view>
            <img @tap="uploadImg('id_image_backend')" src="/static/images/user/icon_u_card_1.png" mode="scaleToFill" alt="">
          </block>
        </view>
      </view>
      <view class="inp-sfz" v-if="has_card_expiration_date==0">
        <uni-datetime-picker type="date" :end="disableEndDate" v-model="card_expiration_date" placeholder="請選擇身份證到期時間" @change="changeCalendar" />
        <view class="btn-wc" @tap="submitForm('id_card')">完成</view>
      </view>
    </view>
    <!-- 工作證 -->
    <view class="card-box">
      <view class="card-title">
        <view class="card-t-l">工作證</view>
        <view>
          <view v-if="has_work_card_date==1">{{work_card_date|filterCardExpirationDate}}</view>
          <!-- <img class="down" v-if="work_card_image" src="/static/images/boss/icon_b_arrow_down.png" mode="scaleToFill" alt=""> -->
          <img class="add" v-if="has_work_card_date==-1" @tap="uploadImg('work_card_image')" src="/static/images/user/icon_u_card_add.png" mode="scaleToFill" alt="">
        </view>
      </view>
      <view class="cer-box" v-if="work_card_image">
          <img :src="work_card_image" @tap="uploadImg('work_card_image')" mode="scaleToFill" alt="">
          <!-- <img src="/static/images/user/icon_u_card_2.png" mode="scaleToFill" alt=""> -->
      </view>
      <view class="inp-sfz" v-if="has_work_card_date==0">
        <uni-datetime-picker type="date" :end="work_card_date" v-model="work_card_date" placeholder="請選擇工作證到期時間" @change="changeCalendarWork" />
        <view class="btn-wc" @tap="submitForm('work_card_image')">完成</view>
      </view>
    </view>
    <!-- 電工證 -->
    <view class="card-box">
      <view class="card-title">
        <view class="card-t-l">電工證</view>
        <view>
          <view v-if="has_electrician_card_date==1">{{has_electrician_card_date|filterCardExpirationDate}}</view>
          <img class="down" v-if="electrician_card_image" src="/static/images/boss/icon_b_arrow_down.png" mode="scaleToFill" alt="">
          <img class="add" v-else @tap="uploadImg('electrician_card_image')" src="/static/images/user/icon_u_card_add.png" mode="scaleToFill" alt="">
        </view>
      </view>
      <view class="cer-box" v-if="electrician_card_image">
        <img :src="electrician_card_image" @tap="uploadImg('electrician_card_image')" mode="scaleToFill" alt="">
        <!-- <img src="/static/images/user/icon_u_card_2.png" mode="scaleToFill" alt=""> -->
      </view>
      <view class="inp-sfz" v-if="has_electrician_card_date==0">
        <uni-datetime-picker type="date" :end="disableEndDate" v-model="electrician_card_date" placeholder="請選擇電工證到期時間" @change="changeCalendarDian" />
        <view class="btn-wc" @tap="submitForm('electrician_card_image')">完成</view>
      </view>
    </view>
    <!-- 工人註冊證 -->
    <view class="card-box">
      <view class="card-title">
        <view class="card-t-l">工人註冊證</view>
        <view>
          <view v-if="has_worker_card_date==1">{{has_worker_card_date|filterCardExpirationDate}}</view>
          <img class="down" v-if="worker_card_image" src="/static/images/boss/icon_b_arrow_down.png" mode="scaleToFill" alt="">
          <img class="add" v-else @tap="uploadImg('worker_card_image')" src="/static/images/user/icon_u_card_add.png" mode="scaleToFill" alt="">
        </view>
      </view>
      <view class="cer-box" v-if="worker_card_image">
        <img :src="worker_card_image" @tap="uploadImg('worker_card_image')" mode="scaleToFill" alt="">
        <!-- <img src="/static/images/user/icon_u_card_2.png" mode="scaleToFill" alt=""> -->
      </view>
      <view class="inp-sfz" v-if="has_worker_card_date==0">
        <uni-datetime-picker type="date" :end="disableEndDate" v-model="worker_card_date" placeholder="請選擇工人註冊證到期時間" @change="changeCalendarGong" />
        <view class="btn-wc" @tap="submitForm('worker_card_date')">完成</view>
      </view>
    </view>
    <!-- 平安卡 -->
    <view class="card-box">
      <view class="card-title">
        <view class="card-t-l">平安卡</view>
        <view>
          <view v-if="has_safety_card_date==1">{{has_safety_card_date|filterCardExpirationDate}}</view>
          <img class="down" v-if="safety_card_image" src="/static/images/boss/icon_b_arrow_down.png" mode="scaleToFill" alt="">
          <img class="add" v-else @tap="uploadImg('safety_card_image')" src="/static/images/user/icon_u_card_add.png" mode="scaleToFill" alt="">
        </view>
      </view>
      <view class="cer-box" v-if="safety_card_image">
        <img :src="safety_card_image" @tap="uploadImg('safety_card_image')" mode="scaleToFill" alt="">
        <!-- <img src="/static/images/user/icon_u_card_2.png" mode="scaleToFill" alt=""> -->
      </view>
      <view class="inp-sfz" v-if="has_safety_card_date==0">
        <uni-datetime-picker type="date" :end="disableEndDate" v-model="safety_card_date" placeholder="請選擇平安卡到期時間" @change="changeCalendarPing" />
        <view class="btn-wc" @tap="submitForm('safety_card_image')">完成</view>
      </view>
    </view>
	</view>
</template>

<script>
import navTitle from '../../boss/components/nav-title.vue';
import {userListCard,userUploadCard} from '../../../utils/userApi'
export default {
	components: {navTitle},
	data() {
		return {
      wayList:[
        {id:1,name:'電郵',checked:false},
        {id:2,name:'訊息',checked:false},
        {id:3,name:'不用提示',checked:true},
      ],
      id_image_front:'',
      id_image_backend:'',
      card_expiration_date:'',
      work_card_image:'',
      work_card_date:'',
      electrician_card_image:'',
      electrician_card_date:'',
      worker_card_image:'',
      worker_card_date:'',
      safety_card_image:'',
      safety_card_date:'',
      detailInfo:{},
      has_card_expiration_date:-1,
      has_work_card_date:-1,
      has_electrician_card_date:-1,
      has_worker_card_date:-1,
      has_safety_card_date:-1,
		};
	},
	props: {
	},
	computed: {},
  filters:{
    filterCardExpirationDate(val){
      val=val+''
      if(val.indexOf('-')>-1){
        let list=val.split('-')
        let str=`${list[0]}年${list[1]}月${list[2]}日失效`
        return str
      }
    }
  },
  onShow() {
    this.disableEndDate=this.$moment().format('YYYY-MM-DD')
    this.getUserListCard()
  },
	methods: {
    changeCalendar(e){
      this.card_expiration_date=e
    },
    changeCalendarWork(e){
      this.work_card_date=e
    },
    changeCalendarDian(e){
      this.electrician_card_date=e
    },
    changeCalendarGong(e){
      this.worker_card_date=e
    },
    changeCalendarPing(e){
      this.safety_card_date=e
    },
    uploadImg(type){
      let that=this
      uni.chooseImage({
        // original 原图， compressed 压缩图，默认二者都有
        sizeType: ["original", "compressed"],
        // camera 使用相机，album 从相册中选图，默认二者都有
        sourceType: ["camera", "album"],
        count:1,
        // success是必须要写的
        success: function (res) {
          const tempFiles = res.tempFiles
          const tempFilePaths = res.tempFilePaths
          uni.uploadFile({
            url: `${that.$imgUrl}/api/common/upload`,
            filePath: tempFilePaths[0],
            header: {
              token: uni.getStorageSync('token')
            },
            name: "file",
          }).then(res => {
            let data = JSON.parse(res.data)
            if(data.code==1){
              that.submitForm(type,data.data.fullurl)
            }else{
              uni.showToast({
                icon:'none',
                title: data.msg||'系統異常'
              })
            }
          })
        }
      })
    },
    async submitForm(type,url){
      let that=this
      let params={}
      if(url){
        if(type=='id_image_front'){
          params.id_image_front=url
        }else if(type=='id_image_backend'){
          params.id_image_backend=url
        }else if(type=='work_card_image'){
          params.work_card_image=url
        }else if(type=='electrician_card_image'){
          params.electrician_card_image=url
        }else if(type=='worker_card_image'){
          params.worker_card_image=url
        }else if(type=='safety_card_image'){
          params.safety_card_image=url
        }
      }else{
        if(type=='id_card'){
          if(that.id_image_front&&that.id_image_backend){
            if(that.card_expiration_date){
              params.card_expiration_date=that.card_expiration_date
            }else{
              uni.showToast({
                icon:'none',
                title: '請選擇傳身份證到期時間'
              })
              return
            }
          }else{
            uni.showToast({
              icon:'none',
              title: '請上傳身份證正反面照片'
            })
            return
          }
        }else if(type=='work_card_image'){
          if(that.work_card_image){
            if(that.work_card_date){
              params.work_card_date=that.work_card_date
            }else{
              uni.showToast({
                icon:'none',
                title: '請選擇傳工作證到期時間'
              })
              return
            }
          }else{
            uni.showToast({
              icon:'none',
              title: '請上傳工作證照片'
            })
            return
          }
        }else if(type=='electrician_card_image'){
          if(that.electrician_card_image){
            if(that.electrician_card_date){
              params.electrician_card_date=that.electrician_card_date
            }else{
              uni.showToast({
                icon:'none',
                title: '請選擇傳電工証到期時間'
              })
              return
            }
          }else{
            uni.showToast({
              icon:'none',
              title: '請上傳電工証照片'
            })
            return
          }
        }else if(type=='worker_card_image'){
          if(that.worker_card_image){
            if(that.worker_card_date){
              params.worker_card_date=that.worker_card_date
            }else{
              uni.showToast({
                icon:'none',
                title: '請選擇工人註冊證到期時間'
              })
              return
            }
          }else{
            uni.showToast({
              icon:'none',
              title: '請上傳工人註冊證照片'
            })
            return
          }
        }else if(type=='safety_card_image'){
          if(that.worker_card_image){
            if(that.safety_card_date){
              params.safety_card_date=that.safety_card_date
            }else{
              uni.showToast({
                icon:'none',
                title: '請選擇平安卡到期時間'
              })
              return
            }
          }else{
            uni.showToast({
              icon:'none',
              title: '請上傳平安卡照片'
            })
            return
          }
        }
      }
      let res=await userUploadCard({...that.detailInfo,...params})
      if(res.code==1){
        that.getUserListCard()
      }else{
        uni.showToast({
          icon:'none',
          title: res.msg||'系統異常'
        })
      }
    },
    async getUserListCard(){
      let res=await userListCard()
      if(res.code==1){
        this.detailInfo=res.data
        this.id_image_front=res.data.id_image_front
        this.id_image_backend=res.data.id_image_backend
        this.card_expiration_date=res.data.card_expiration_date
        this.work_card_image=res.data.work_card_image
        this.work_card_date=res.data.work_card_date
        this.electrician_card_image=res.data.electrician_card_image
        this.electrician_card_date=res.data.electrician_card_date
        this.worker_card_image=res.data.worker_card_image
        this.worker_card_date=res.data.worker_card_date
        this.safety_card_image=res.data.safety_card_image
        this.safety_card_date=res.data.safety_card_date
        this.has_card_expiration_date=res.data.card_expiration_date?1:0
        this.has_work_card_date=res.data.work_card_date?1:0
        this.has_electrician_card_date=res.data.electrician_card_date?1:0
        this.has_worker_card_date=res.data.worker_card_date?1:0
        this.has_safety_card_date=res.data.safety_card_date?1:0
        console.log(this.has_card_expiration_date)
      }else{
        uni.showToast({
          icon:'none',
          title: res.msg||'系統異常'
        })
      }
    },
		// 单选
		checkboxGroupChange(e) {
      console.log(e)
		},
	}
};
</script>
<style lang="scss" scoped>
.leave_box{
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  background: #F4F6FA;
}
.cer-title{
  width: calc(100% - 40px);
  padding: 10px;
  margin: 10px auto 10px;
  border-radius: 10px;
  background: #fff;
  font-weight: bold;
  font-size: 15px;
  color: #333333;
  line-height: 21px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .c-t-l{
    flex: 1;
  }
}
::v-deep .c-t-r{
  flex: 2;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: right;
  .uni-checkbox-input{
    border-radius: 50%;
    margin: 0 -1px 0 7px;
  }
}
.card-box{
  width: calc(100% - 20px);
  padding: 13px 10px 10px;
  border-radius: 10px;
  background: #fff;
  margin: 0 auto 10px;
  font-weight: bold;
  font-size: 15px;
  color: #333333;
  line-height: 21px;
}
.card-list{
  margin: 22px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .card-li{
    width: calc(50% - 6px);
    height: 103px;
    position: relative;
    img{
      width: 100%;
      height: 100%;
    }
    img.img-photo{
      position: absolute;
      width: 30px;
      height: 30px;
      top: 24px;
      left: 50%;
      margin-left: -15px;
    }
    .img-txt{
      width: 100%;
      text-align: center;
      font-weight: bold;
      font-size: 13px;
      color: #333333;
      line-height: 18px;
      position: absolute;
      top: 66px;
    }
  }
}
.card-title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  view{
    flex: 1;
  }
  view:last-child{
    flex: 2;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 13px;
    color: #666666;
    line-height: 18px;
  }
  img.add{
    width: 20px;
    height: 20px;
  }
  img.down{
    margin-left: 10px;
    width: 16px;
    height: 9px;
  }
}
.cer-box{
  img{
    margin: 22px auto 0;
    width: 256px;
    display: block;
  }
}
.inp-sfz{
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .btn-wc{
    width: 70px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    border-radius: 8px;
    color: #fff;
    background: #1C7AF7;
  }
}
</style>
